<template>
	<view>
		<!-- 搜索区域 -->
		<view class="search" :style="{ top: searchTop + 'px' }">
			<up-icon color="white" name="map" size="20" style="margin-left: 10px; margin-right: 5px"></up-icon>
			<up-text color="white" style="width: 50px" :text="city" @click="cityShow = true"></up-text>
			<up-search placeholder="搜索你关系的职位名称" :showAction="false" v-model="keyword" style="margin-right: 5px" @blur="getJob"></up-search>
			<up-button style="margin-top: 13px; height: 35px; width: 50px; margin-right: 10px" shape="circle" text="筛选" @click="goToFilter"></up-button>
		</view>
		<city-select v-model="cityShow" @city-change="cityChange"></city-select>
		<!-- 标签栏 -->
		<view class="tabs" :class="{ sticky: searchTop === -100 }" :style="{ top: searchTop === -100 ? '0px' : '60px' }">
			<up-tabs
				:list="list1"
				lineWidth="35"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;"
				@click="updateSelectedTab"
			>
				<template #right>
					<view style="padding-left: 4px" @tap="goToAdd">
						<up-icon style="margin-right: 20px; margin-top: 5px" name="plus-circle" size="21" bold></up-icon>
					</view>
				</template>
			</up-tabs>
		</view>
		<!-- 职位展示 -->
		<up-notify ref="uNotifyRef" message="Hi uview-plus"></up-notify>
		<view class="job-list">
			<up-skeleton
				:class="loading === true ? 'job-card' : ''"
				title
				titleHeight="26px"
				rows="3"
				:rowsWidth="['45%', '95%', '30%']"
				:rowsHeight="['22px', '24px', '20px']"
				:loading="loading"
			>
				<scroll-view
					class="scroll"
					scroll-y="true"
					:refresher-enabled="refresherEnabled"
					@refresherpulling="onPulling"
					@refresherrefresh="onRefresh"
					@refresherrestore="onRestore"
					@refresherabort="onAbort"
					:refresher-triggered="triggered"
					@scroll="roll"
					refresher-background="#fff"
					@scrolltolower="onReachBottom"
				>
					<view class="no-data" v-if="total === 0">
						<up-empty text="暂时没有找到符合要求的职位" mode="list"></up-empty>
						<up-divider text="为您推荐如下职位~"></up-divider>
					</view>
					<view v-for="(job, index) in jobs" :key="index" class="job-card" @click="goToDetail(job.workId)">
						<view class="job-header">
							<view class="job-title">{{ job.workName }}</view>
							<view class="salary">{{ job.workSalaryStart }}-{{ job.workSalaryEnd }}K</view>
						</view>
						<view class="job-info">
							<view class="company">{{ job.companyName }}</view>
							<view class="tags">
								<view class="tag">{{ job.workEducation }}</view>
								<text class="info">{{ job.workDetails }}</text>
							</view>
							<view class="contact-location">
								<view class="contact">
									<u-avatar class="avatar" :src="job.companyLogo"></u-avatar>
									联系人　{{ job.juridicalPerson }} {{ job.juridicalPersonSex }}
								</view>
								<view class="location">{{ job.workLocation.split('-').slice(0, 3).join(' ') }}</view>
							</view>
						</view>
					</view>
					<view class="load">
						<!--做滚动加载提示使用, more:上拉加载更多 loading:加载中 noMore:没有更多数据-->
						<uni-load-more :status="status"></uni-load-more>
					</view>
				</scroll-view>
			</up-skeleton>
			<up-skeleton
				:class="loading === true ? 'job-card' : ''"
				v-for="index in 3"
				title
				titleHeight="26px"
				rows="3"
				:rowsWidth="['45%', '95%', '30%']"
				:rowsHeight="['22px', '24px', '20px']"
				:loading="loading"
			></up-skeleton>
		</view>
	</view>
</template>

<script>
import citySelect from '@/common/u-city-select.vue';
export default {
	components: {
		citySelect
	},
	data() {
		return {
			keyword: '',
			hideSearch: false,
			list1: [],
			value: 0,
			jobs: [],
			searchTop: 0,
			lastScrollTop: 0,
			height: 30, // 城市选择高度
			bgColor: this.$u.color.bgColor, // 背景颜色
			marginTop: 30, // 顶部间隔
			marginBottom: 30, // 底部间隔
			cityShow: false, // 城市选择显示
			city: '城市',
			address: '',
			selectedTab: null,
			status: 'more',
			pageSize: 5,
			page: 1,
			total: 0, //总共有多少条数据
			dataList: [],
			refresherEnabled: false, //开启自定义下拉刷新
			triggered: false, //设置当前下拉刷新的状态
			loading: true
		};
	},
	mounted() {
		this.getIntention();
		this.get();
	},
	methods: {
		// 选择地址
		cityChange(e) {
			this.address = e.province.label + '-' + e.city.label + '-' + e.area.label;
			this.city = e.area.label;
			this.getJob();
		},
		// 前往筛选
		goToFilter() {
			uni.navigateTo({
				url: '/pages/main/filter'
			});
		},
		// 前往添加意向
		goToAdd() {
			uni.navigateTo({
				url: '/pages/positions/job'
			});
		},
		// 获取职业意向
		getIntention() {
			this.list1 = [];
			this.list1.push({
				name: '综合',
				key: -1
			});
			if (uni.getStorageSync('user').identity === '学生') {
				this.list1.push({
					name: '校企合作',
					key: 0
				});
			}
			this.$api
				.getIntentions({
					userId: uni.getStorageSync('user').candidateId
				})
				.then((res) => {
					res.data.forEach((data) => {
						this.list1.push({
							name: data.positionName,
							key: data.expectedPosition
						});
					});
				});
		},
		// 刷新内容
		refreshContent() {
			this.$refs.uNotifyRef.show({
				top: 110,
				type: 'success',
				color: '#5ca2fe',
				bgColor: '#fff',
				message: '内容已更新！',
				duration: 1000 * 3
			});
			this.page = 1;
			this.get();
		},
		// 获取岗位/列表
		updateSelectedTab(tab) {
			this.selectedTab = tab;
			this.get();
			this.page = 1;
		},
		get() {
			if (uni.getStorageSync('filter') !== '') {
				this.getJobByFilter();
			} else {
				this.getJob();
			}
		},
		// 获取列表
		getJob() {
			this.$api
				.getWork({
					positionId: this.selectedTab?.key ?? -1,
					location: this.address,
					keyword: this.keyword,
					page: this.page,
					pageSize: this.pageSize
				})
				.then((res) => {
					if (this.page === 1) {
						this.jobs = res.data;
					} else {
						this.jobs = [...this.jobs, ...res.data];
					}
					this.total = res.total; // Update total count
					this.status = this.jobs.length < this.total ? 'more' : 'noMore';
					if (this.total === 0) {
						this.getLike();
					}
					this.loading = false;
				});
		},
		getLike() {
			this.$api
				.getWork({
					positionId: -1,
					page: 1,
					pageSize: 3
				})
				.then((res) => {
					this.jobs = res.data;
				});
		},
		// 前往详情页
		goToDetail(id) {
			uni.navigateTo({
				url: '/pages/main/info?id=' + id
			});
		},
		// 根据筛选获取
		getJobByFilter() {
			let filter = { ...uni.getStorageSync('filter'), page: this.page, pageSize: this.pageSize };
			this.$api.getWorkByFilter(filter).then((res) => {
				if (this.page === 1) {
					this.jobs = res.data;
				} else {
					this.jobs = [...this.jobs, ...res.data];
				}
				this.total = res.total; // Update total count
				this.status = this.jobs.length < this.total ? 'more' : 'noMore';
				if (this.total === 0) {
					this.getLike();
				}
				this.loading = false;
			});
		},
		//自定义下拉刷新控件被下拉
		onPulling(e) {
			console.log('onpulling', e);
		},
		//自定义下拉刷新被触发
		onRefresh() {
			if (this._freshing) return;
			this._freshing = true;
			//刷新初始化数据
			this.current = 1;
			//调用获取数据的函数
			this.triggered = 'restore';
			setTimeout(() => {
				this.triggered = false;
				this._freshing = false;
				this.refreshContent();
			}, 2000);
		},
		//自定义下拉刷新被复位
		onRestore() {
			this.triggered = 'restore'; // 需要重置
			console.log('结束');
		},
		//自定义下拉刷新被中止
		onAbort() {
			console.log('中断');
			this.triggered = false;
		},
		// 获取滚动距离
		roll(res) {
			if (res.target.scrollTop >= 40) {
				this.refresherEnabled = false;
			} else {
				this.refresherEnabled = true;
			}
		},
		onReachBottom() {
			let allTotal = this.page * this.pageSize;
			if (allTotal < this.total) {
				this.status = 'loading'; //加载中状态
				this.page++;
				setTimeout(() => {
					this.get();
				}, 2000);
			} else {
				this.status = 'noMore'; //加载完状态
			}
		}
	}
};
</script>

<style scoped>
.wrap {
	height: 200vh;
}
.search {
	display: flex;
	height: 60px;
	background-color: #5ca2fe;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	transition: top 0.5s ease-in-out;
}

.tabs {
	position: fixed;
	width: 100%;
	background-color: #fff;
	z-index: 999;
	padding: 5px;
	border-bottom: 1px solid #ddd;
	transition: top 0.5s ease-in-out;
}
.tabs.sticky {
	position: fixed;
	top: 0;
	width: 100%;
}

.u-text[data-v-0a574502] {
	flex: none;
}

.scroll {
	height: calc(95vh - 200rpx);
}

.job-list {
	/* margin-top: 20%;*/
	transform: translateY(105px);
	padding: 20rpx;
}

.job-card {
	padding: 20rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	margin-bottom: 20rpx;
}

.job-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.job-title {
	font-size: 32rpx;
	font-weight: bold;
}

.salary {
	font-size: 32rpx;
	color: #e54d42;
}

.job-info {
	font-size: 24rpx;
	color: #999;
}

.company {
	margin-bottom: 10rpx;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10rpx;
	align-items: center;
}

.tag {
	background-color: #f5f5f5;
	color: #333;
	padding: 8rpx 16rpx;
	border-radius: 8rpx;
	margin-right: 10rpx;
	margin-bottom: 10rpx;
	font-size: 24rpx;
}

.contact-location {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.contact {
	display: flex;
	align-items: center;
}

.avatar {
	width: 48rpx;
	height: 48rpx;
	margin-right: 8rpx;
}

.location {
	color: #999;
}

.info {
	transform: translateY(-5px);
}
</style>